<template>
    <div class="my-title">
        <span class="title">
            {{ title }}
        </span>
        <span class="warn">
            <span v-if="!!warn">
                ({{ warn }}) 
            </span>
        </span>
    </div>

</template>
<script>
export default {
    name: 'my-title',
    components: {
    },
    props:{
        title:{
            type:String,
            default:'',
        },
        warn:{
            type:String,
            default:'',  
        }
    },
    data () {
        return {
        }
    },
    computed: {
    },
    watch: {
    },
    methods: {

    },
    created () {
    },
    mounted () {
    },
}
</script>
<style lang="less" scoped>
    @import '../../css/default.less';
    .my-title{
        padding-top: 12px;
        background: @def-background;
        position: relative;
        .title{
            font-weight: bold;
        }
    
        .warn{
            color: @warn-color;
        }
    }

    .my-title::after{
        content:''; 
        display:block; 
        padding: 6px;
        border-bottom: 1px solid @line-color;
    }

</style>

